<template>
     <div class="baseEchart">
          <div class="echart" ref="echartDivRef" :style="{ width: width, height: height }"></div>
     </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, withDefaults, watchEffect } from 'vue'
import { useEcharts } from '../hooks/useEcharts'
// import { EChartsOption } from 'echarts'
const emit = defineEmits(['getEchartsRef'])
const props = withDefaults(
     defineProps<{
          options: any
          width?: string
          height?: string
          isClear?: boolean
     }>(),
     {
          options: () => ({}),
          width: '100%',
          height: '100%',
          isClear: false,
     },
)

const echartDivRef = ref<HTMLElement>()
onMounted(() => {
     const { setOptions, echartsInstance } = useEcharts(echartDivRef.value!)
     watchEffect(() => {
          setOptions(props.options, props.isClear)
          emit('getEchartsRef', echartsInstance)
     })
})
</script>

<style scoped>
.baseEchart {
     width: 100%;
     height: 100%;
}

.echart {
     /* background-color: rgba(0, 0, 0, 0); */
}
</style>
